<template>
	<view class="wrapper">
		
		<head-title :titleText="titleText" showLeftButton="true"></head-title>
		<scroll-view @scrolltoupper="scrolltoupper" :scroll-into-view="intoview" scroll-y class="cont" :style="{height: windowH + 'px'}">
			<!-- 对方带礼物报名  收到礼物 -->
			<block v-for="(item,index) in chatList" :key="index">
				<view v-if="item.c_type==2&&item.is_self!=1" class="list">
					<view v-if="item.is_show_time==1" class="dataTime">{{item.update_time_str}}</view>
					<view class="leftUser box flex_row">
						<view class="msg">
							<view class="giftCont">
								<view class="giftTitle">你收到一份礼物</view>
								<image class="gift" :src="item.gift.c_img" mode="aspectFill"></image>
								<view class="explain">
									收到的礼物可以转化为现金提现，请到你的个人中心账户中
									<view @tap="lookMoney" class="look">查看余额</view>
								</view>
							</view>
						</view>
						<view @tap="bindUser(item.from_uid)" class="headPic">
							<image :src="item.to_img" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<!--我带礼物报名 送出礼物-->
				<view v-if="item.c_type==2&&item.is_self==1" class="list">
					<view v-if="item.is_show_time==1" class="dataTime">{{item.update_time_str}}</view>
					<view class="rightUser box flex_row">
						<view class="msg">
							<view class="giftCont">
								<view class="giftTitle">送你一份礼物</view>
								<image class="gift" :src="item.gift.c_img" mode="aspectFill"></image>
								<!-- <view class="explain">
									我对你的活动非常感兴趣，希望你可以让我参加
								</view> -->
							</view>
						</view>
						<view class="headPic">
							<image :src="item.to_img" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<!-- 普通送礼 -->
				<!-- <view v-if="item.c_type==2" class="list">
					<view v-if="item.is_show_time==1" class="dataTime">{{item.update_time_str}}</view>
					<view :class="{leftUser:item.is_self!=1}" class="box flex_row">
						<view class="msg">
							<view class="giftCont">
								<view class="giftTitle">送你一份礼物</view>
								<image class="gift" :src="item.gift.c_img" mode="aspectFill"></image>
							</view>
						</view>
						<view class="headPic">
							<image :src="item.to_img" mode="aspectFill"></image>
						</view>
					</view>
				</view> -->
				<!-- 对方活动的请求，我点击同意或拒绝 -->
				<view v-if="item.c_type==3" class="list">
					<view v-if="item.is_show_time==1" class="dataTime">{{item.update_time_str}}</view>
					<view :class="{leftUser:item.is_self!=1}" class="box flex_row">
						<view class="msg">
							<view @tap="bindAct(item.activity.id)" class="flex_row">
								<view><image class="actImg" :src="item.activity.h_face_img" mode="aspectFill"></image></view>
								<view class="txt flex_col">
									<view class="title">{{item.activity.h_title}}</view>
									<view class="sex">{{item.activity.h_sex_str}}</view>
									<view class="time">{{item.activity.h_time_str}}</view>
									<view class="address">{{item.activity.h_areaitem}}</view>
								</view>
							</view>
							<view v-if="item.is_over==0" class="agreeCont flex_row">
								<block v-if="item.is_self!=1">
									<view @tap="noAgree(item.id)" class="noAgree">拒绝</view>
									<view @tap="agree(item.id)" class="agree">同意</view>
								</block>
								<block v-else>
									<text class="wat">等待对方处理</text>
								</block>
							</view>
							<view v-else class="agreeCont already">
								<text v-if="item.is_self==1">对方已处理</text>
								<text v-if="item.is_self!=1">你已处理</text>
							</view>
						</view>
						<view v-if="item.is_self!=1" @tap="bindUser(item.from_uid)" class="headPic">
							<image :src="item.to_img" mode="aspectFill"></image>
						</view>
						<view v-else class="headPic">
							<image :src="item.to_img" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view v-if="item.c_type==4 && item.is_self!=1" class="list">
					<view class="sys">
						请尽量完善你的信息资料，通过率会更高哦^_^
					</view>
				</view>
				<!-- 对方对活动感兴趣 普通聊天-->
				<view v-if="item.c_type==1" class="list">
					<view v-if="item.is_show_time==1" class="dataTime">{{item.update_time_str}}</view>
					<view :class="{leftUser:item.is_self!=1}" class="putong box flex_row">
						<view class="talkTxt">
							<text selectable="true">{{item.content}}</text>
						</view>
						<view v-if="item.is_self!=1" @tap="bindUser(item.from_uid)" class="headPic">
							<image :src="item.to_img" mode="aspectFill"></image>
						</view>
						<view v-else class="headPic">
							<image :src="item.to_img" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</block>
			<view :id="lastid"></view>
		</scroll-view>
		<view @tap="bindShop" class="animated bounce infinite slower shop">
			<image src="https://yp.6vx.com/data/sys_img/other_img/shop.png" mode="aspectFill"></image>
		</view>
		<view class="inputCont flex_row">
			<view class="send flex_row"><input @input="sendTxt" cursor-spacing="20" @confirm="sendMsg" confirm-type="send" type="text" placeholder="我也来说两句..." placeholder-class="pla" :value="sendData" /></view>
			<view @tap="sendMsg" class="btn">发送</view>
		</view>
	</view>
</template>

<script>
	import headTitle from "../../components/headTitle.vue";
	import common from "../../common/network.js";
	var session = '',pages=1,userid = '',fullPage=1,myPic='';
	export default {
		components:{headTitle},
		data(){
			return{
				windowH:0,chatList:[],titleText:'',
				lastid:'',intoview:'',
				sendData:'',num:0,content:'',limit:1,
			}
		},
		onLoad:function(options){
			var that = this;
			that.getHeight();
			if(options.session!=undefined){
				session = options.session;
				userid = options.userid;
				that.getMsg(false,'toView');
			}
			common.network.getStorage('userinfo',function(data){
				console.log(data)
				myPic = data.avatarurl;
			})
		},
		onShow:function(){
			if(this.chatList!=''){
				this.getMsg('shows','toView');
			}
		},
		onHide:function(){
			pages = 1;
		},
		onUnload:function(){
			pages = 1;
		},
		methods:{
			getHeight:function(){
				var that = this;
				common.network.getHeight(function(h,w,bar){
					that.windowH = h - w/750 * 254;
				})
			},
			bindUser:function(id){
				uni.navigateTo({
					url: "/pagesA/userInfo/userInfo?session="+session+"&userid="+id
				})
			},
			bindAct:function(id){
				uni.navigateTo({
					url: "/pagesA/actDetail/actDetail?session="+session+"&actid="+id
				})
			},
			agree:function(id){
				this.agreeData(id,1)
			},
			noAgree:function(id){
				this.agreeData(id,2)
			},
			agreeData:function(msgid,agree){
				var that = this;
				var $data = {
					'type':'zmsg_ac_up',
					'session':session,
					'msg_id':msgid,
					'is_green':agree,
				};
				common.network.request($data,function(res){
					console.log(res);
					that.getMsg('shows','toView');
				})
			},
			bindShop:function(){
				uni.navigateTo({
					url:"/pagesA/giftList/giftList?session="+session+"&userid="+userid
				})
			},
			lookMoney:function(){
				uni.navigateTo({
					url: '/pagesA/myMoney/myMoney?session='+session
				})
			},
			getMsg:function(shows,toView){
				var that = this;
				var chatList = that.chatList;
				var $data = {
					'type':'zmsg_history_chat_list',
					'session':session,
					'to_uid':userid,
					'page':pages
				};
				console.log(pages)
				common.network.request($data,function(res){
					console.log(res);
					fullPage = res.pageData.pagecount;
					if(shows){
						that.chatList = res.list;
					}else{
						that.chatList = (res.list).concat(chatList);
						that.titleText = res.other_title.nickname;
					}
					if(toView){
						that.num ++;
						that.lastid = 'to'+that.num;
						setTimeout(function(){
							that.intoview = that.lastid;
							console.log(that.intoview)
						},100)
					}
				})
			},
			sendTxt:function(e){
				this.sendData = e.detail.value;
			},
			sendMsg:function(){
				var that = this;
				var msgData = that.sendData
				if(that.limit==1){
					that.limit = 0;
					if(msgData.replace(/(^\s*)|(\s*$)/g, "") == ""){
						that.model('请输入内容');
						that.sendData = '';
						return false;
					}else{
						var $data = {
							'type':'zmsg_sendmsg',
							'session':session,
							'to_uid':userid,
							'to_data':encodeURI(msgData),
						};
						console.log($data);
						common.network.request($data,function(res){
							console.log(res);
							var arr = {
								'c_type':1,
								'is_show_time':0,
								'update_time_str':'',
								'is_self':1,
								'content':msgData,
								'to_img': myPic
							};
							that.chatList.push(arr);
							that.num ++;
							that.lastid = 'to'+that.num;
							setTimeout(function(){
								that.intoview = that.lastid;
								that.limit = 1;
							},100)
							that.sendData = '';
						})
	
					}
				}else{
					return false;
				}
			},
			// 					var pat=new RegExp("[^a-zA-Z0-9\_\u4e00-\u9fa5]","i"); 
			// 					if(pat.test(msgData)==true){ 
			// 						that.model('含有非法字符',function(){
			// 							that.sendData = '';
			// 						});
			// 						return false; 
			// 					}
			model:function(txt){
				var that = this;
				uni.showModal({
					content:txt,
					showCancel:false,
					confirmText:'知道了',
					confirmColor:'#6278FF',
					success:function(){
						that.limit = 1;
					}
				})
			},
			scrolltoupper:function(){
				if(pages>=fullPage){
					pages = 1;
					return false;
				}else{
					pages ++;
					this.getMsg();
				}
			}
		}
	}
</script>
<style scoped>
	@import url("../../static/animate.css");
	.cont{
		background: #F2F3F7;
		box-sizing: border-box;
	}
	.shop{
		width: 100px;
		height: 100px;
		position: fixed;
		bottom: 180px;
		right: 30px;
		z-index: 2;
	}
	.shop image{
		width: 100%;
		height: 100%;
	}
	.list{
		padding-bottom: 40px;
	}
	.list:first-of-type{
		padding-top: 30px;
	}
	.list:first-of-type .dataTime{
		padding-top: 0;
	}
	.list:last-of-type{
		padding-bottom: 150px;
	}
	.dataTime{
		color: #BCBCBE;
		font-size: 26px;
		text-align: center;
		padding: 20px 0;
	}
	.box{
		padding: 0 30px;
		box-sizing: border-box;
		justify-content: flex-end;
		align-items: flex-start;
	}
	.box.putong{
		align-items: center;
	}
	.box.leftUser{
		flex-direction: row-reverse;
	}
	.box .headPic{
		margin-left: 24px;
	}
	.box.leftUser .headPic{
		margin-right: 24px;
		margin-left: 0;
	}
	.headPic{
		min-width: 100px;
		width: 100px;
		height: 100px;
		border-radius: 50%;
	}
	.headPic image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.msg{
		background: #fff;
		border-radius: 20px;
		padding: 26px;
		position: relative;
		overflow: hidden;
		/* border: 1px solid red; */
	}
	.talkTxt{
		background: #6278FF;
		color: #fff;
		padding: 14px 26px;
		min-width: 1em;
		min-height: 44px;
		max-width: 450px;
		box-sizing: border-box;
		line-height: 44px;
		border-radius: 20px;
		word-break: break-all;
		text-align: justify;
	}
	.sys{
		background: #EAEDF2;
		color: #A6A7AB;
		padding: 10px 30px;
		margin: 10px 0;
		text-align: center;
		border-radius: 100px;
		max-width: 500px;
		line-height: 44px;
		font-size: 24px;
		white-space: nowrap;
		word-break: break-all;
		margin: auto;
	}
	.msg .title{
		padding-bottom: 14px;
		position: relative;
		max-width: 5em;
		overflow: hidden;
		white-space: nowrap;
		font-size: 32px;
		color: #353535;
		margin-bottom: 10px;
	}
	.msg .title:after{
		content: '';
		height: 4px;
		width: 60px;
		position: absolute;
		left: 0;
		bottom: 0;
		background: #6278FF;
	}
	.txt{
		height: 190px;
		justify-content: space-between;
		align-items: flex-start;
	}
	.txt view{
		max-width: 5em;
		overflow: hidden;
		white-space: nowrap;
		font-size: 26px;
		color: #A1A2A4;
	}
	.actImg{
		width: 300px;
		height: 190px;
		border-radius: 10px;
		margin-right: 20px;
	}
	.giftCont{
		text-align: center;
		max-width: 450px;
		min-width: 300px;
		font-size: 28px;
		padding-top: 60px;
	}
	.giftTitle{
		color: #fff;
		font-size: 30px;
		background: #6278FF;
		padding: 16px 0;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
	}
	.giftCont .gift{
		width: 120px;
		height: 120px;
	}
	.explain{
		line-height: 44px;
		padding-bottom: 10px;
		word-break: break-all;
	}
	.look{
		color: #6278FF;
		margin-top: 4px;
	}
	.agreeCont{
		justify-content: space-around;
		padding-top: 20px;
	}
	.agreeCont.already{
		text-align: center;
		color: #C3C3C3;
	}
	.wat{
		color: #C3C3C3;
		text-align: center;
	}
	.agreeCont view{
		padding: 8px 30px;
		border-radius: 10px;
		border: 1px solid #DBDCDE;
	}
	.agreeCont .agree{
		color: #fff;
		background: #6278FF;
		border: 1px solid #6278FF;
	}
	.inputCont{
		background: #fff;
		padding: 26px 30px;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		justify-content: space-between;
		box-shadow: 0 -1px 40px rgba(0,0,0,0.15);
	}
	.inputCont .send{
		background: #F2F3F7;
		width: 76%;
		height: 70px;
		box-sizing: border-box;
		padding: 0 15px;
		border-radius: 8px;
	}
	.inputCont input{
		width: 100%;
	}
	.inputCont .btn{
		width: 20%;
		background: #6673FF;
		color: #fff;
		font-size: 32px;
		height: 70px;
		line-height: 70px;
		text-align: center;
		border-radius: 8px;
	}
</style>
